<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证密码</title>
    <style>
        .err
        {
            color: red;
            font-size: 25px;
            font-weight: 700;
        }

        .corr
        {
            color: green;
            font-size: 25px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div class="passwdinput">
        <input type="password" class="ipt">
        <span class="msg">请输入6~10位的密码</span>
    </div>


    <script>
        var input = document.querySelector('.ipt');
        var msg = document.querySelector('.msg');

        input.onblur = function() 
        {
            if(this.value.length < 6 || this.value.length > 10)
            {
                msg.innerHTML = '密码应在6~10字符以内';
                msg.className = 'err';
            }
            else 
            {
                msg.innerHTML = '密码符合要求';
                msg.className = 'corr';
            }
        }
    </script>
</body>
</html>